<template>
  <div :class="{'is-mobile': isMobile}" class="ip-info-detail">
    <div class="ip-info-detail-top">
      <div class="cover-container">
        <img :src="detailData.cover || defaultMengli" alt="共创">
      </div>
      <el-row v-if="isMobile">
        <el-col :span="24" class="ip-info-list column">
          <div class="ip-info-item">
            <div class="title">IP名称</div>
            <div class="content">{{ detailData.name }}</div>
          </div>
          <div class="ip-info-item">
            <div class="title">表情数量</div>
            <div class="content">{{ detailData.workNum | moneyFilter }}</div>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-row :gutter="isMobile?14:0" :class="{'screen-width': screenWidth <= 1280 && !isMobile, 'common-width': screenWidth >1280 && !isMobile}">
      <el-col v-if="!isMobile" :span="colSpan" class="ip-info-list column">
        <div class="ip-info-item">
          <div class="title"><img src="../../assets/mengli/ipName.png" alt="共创">IP名称</div>
          <div class="content">{{ detailData.name }}</div>
        </div>
        <div class="ip-info-item">
          <div class="title"><img src="../../assets/mengli/workNum.png" alt="共创">表情数量</div>
          <div class="content">{{ detailData.workNum | moneyFilter }}</div>
        </div>
      </el-col>
      <!-- horizontal -->
      <el-col :span="colSpan" :class="{'mobile-dividing': isMobile }" class="ip-info-list column">
        <div class="ip-info-item">
          <div class="title"><img src="../../assets/mengli/productionTotal.png" alt="共创">表情包套数</div>
          <div class="content">{{ detailData.productionTotal | moneyFilter }}</div>
        </div>
        <div class="ip-info-item">
          <div class="title"><img src="../../assets/mengli/range.png" alt="共创">表情包范围</div>
          <div v-if="detailData.range" class="content">{{ detailData.range === 1?'萌力星球':'其他' }}</div>
          <div v-else>--</div>
        </div>
      </el-col>
      <el-col :span="colSpan" :class="{'mobile-dividing': isMobile }" class="ip-info-list column">
        <div class="ip-info-item">
          <div class="title"><img src="../../assets/mengli/downloadNum.png" alt="共创">总下载量</div>
          <div class="content">
            <el-tooltip class="item" placement="top" effect="dark">
              <div slot="content" style="max-width: 200px;">{{ detailData.downloadNum | moneyFilter }}</div>
              <div class="inner-content ellipsis">{{ detailData.downloadNum | bigDataFilter }}</div>
            </el-tooltip>
          </div>
        </div>
        <div class="ip-info-item">
          <div class="title"><img src="../../assets/mengli/sengNum.png" alt="共创">总发送量</div>
          <div class="content">
            <el-tooltip class="item" placement="top" effect="dark">
              <div slot="content" style="max-width: 200px;">{{ detailData.sendNum | moneyFilter }}</div>
              <div class="inner-content ellipsis">{{ detailData.sendNum | bigDataFilter }}</div>
            </el-tooltip>
          </div>
        </div>
      </el-col>
      <el-col :span="colSpan" class="ip-info-list column">
        <div class="ip-info-item">
          <div class="title"><img src="../../assets/mengli/likeNum.png" alt="共创">总赞赏次数</div>
          <div class="content">
            <el-tooltip class="item" placement="top" effect="dark">
              <div slot="content" style="max-width: 200px;">{{ detailData.rewardNum | moneyFilter }}</div>
              <div class="inner-content ellipsis">{{ detailData.rewardNum | bigDataFilter }}</div>
            </el-tooltip>
          </div>
        </div>
        <div class="ip-info-item">
          <div class="title"><img src="../../assets/mengli/likePrice.png" alt="共创">总赞赏金额</div>
          <div class="content">
            <el-tooltip class="item" placement="top" effect="dark">
              <div slot="content" style="max-width: 200px;">¥{{ detailData.rewardPrice | moneyFilter }}</div>
              <div class="inner-content ellipsis">¥{{ detailData.rewardPrice | bigDataFilter }}</div>
            </el-tooltip>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { moneyFilter, bigDataFilter } from '@/filters/number';
import defaultMengli from '@/assets/mengli/defaultMengli.png';
export default {
  filters: { moneyFilter, bigDataFilter },
  props: {
    detailData: {
      type: Object,
      default: () => {
        return {};
      }
    },
    isMobile: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      defaultMengli,
      screenWidth: document.body.clientWidth
    };
  },
  computed: {
    colSpan() {
      return this.isMobile ? 8 : 6;
    }
  }
};
</script>
<style lang="scss" scoped>
.ip-info-detail {
  display: flex;
  // align-items: center;
  &.is-mobile {
    flex-direction: column;
    .cover-container {
      width: 94px;
      height: 94px;
      border: 1px solid #dddddd;
      border-radius: 8px;
      padding: 10px;
      margin-bottom: 12px;
      margin-right: 19px;
    }
    .ip-info-item {
      margin-bottom: 12px !important;
      margin-right: 0px !important;
      .title {
        margin-bottom: 4px !important;
        img {
          display: none;
        }
      }
    }
  }
  .cover-container {
    width: 160px;
    height: 160px;
    margin-right: 30px;
    flex-shrink: 0;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius:8px;
    }
  }
  .screen-width {
    width: 70%;
  }
  .common-width {
    flex: 1;
  }
}
.ip-info-detail-top {
  display: flex;
}
.ip-info-list {
  .ip-info-item {
    margin-right: 5px;
    .title {
      font-size:14px;
      font-family:PingFangSC-Regular,PingFang SC;
      font-weight:400;
      color:rgba(153,153,153,1);
      line-height:1.2;
      display: flex;
      align-items: center;
      flex-shrink: 0;
      img {
        width: 16px;
        height: 16px;
        margin-right: 4px;
      }
    }
    .content {
      font-size: 16px;
      font-family: PingFangSC-Medium,PingFang SC;
      font-weight: 500;
      color:rgba(51,51,51,1);
      line-height: 20px;
      flex-shrink: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: flex;
    }
    &:last-child {
      margin-bottom: 0 !important;
      margin-right: 0;
    }
  }
  &.column {
    .ip-info-item {
      margin-bottom: 40px;
     }
    .title {
      margin-bottom: 20px;
    }
  }
  &.horizontal {
    .ip-info-item {
      display: flex;
      align-items: center;
      margin-bottom: 50px;
      .title {
        width: 95px;
        margin-right: 3px;
      }
      .content {
        flex: 1;
      }
    }
  }

}
@media screen and (max-width: 1370px){
  .horizontal {
    .ip-info-item {
      display: block !important;
      margin-bottom: 25px !important;
      .title {
        margin-bottom: 9px;
      }
    }
  }
}
.inner-content {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}
.mobile-dividing {
  border-right: 1px solid #DDE1EA;
}
</style>
